<style>
    img.fans-portrait {
        width: 50px;
        height: 50px;
    }

    .fsh-rightPanel .layui-table-body .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }

    .fsh-rightPanel {
        background: white;
    }

    #list li {
        display: inline-block;
        padding: 20px 20px;
        box-sizing: border-box;
        width: 250px;
        text-align: center;
        overflow: hidden;
        position: relative;
    }

    #list li:hover {
        background: #f3f3f3;
        cursor: pointer;
    }

    #list img {
        width: 180px;
        height: 120px;
        border-radius: 5px;
    }

    #list .title {
        padding-top: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #page {
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
        text-align: center;
    }

    .icon-delete {
        position: absolute;
        right: 10px;
        top: 0;
        margin-top: 20%;
    }

    .icon-edit {
        position: absolute;
        right: 10px;
        top: 0;
        margin-top: 35%;
    }

    .del, .edit {
    }

</style>
<div class="fsh-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-form-item wx-search" id="list_form">
            <div class="layui-inline">
                <input style="display:none" type="password"/>
                <label>
                    <input type="text" placeholder="请输入课程名称" readonly="readonly" class="layui-input" id="title">
                </label>
            </div>
            <button class="layui-btn" id="search">搜索</button>
        </div>
        <ul id="list">

        </ul>
    </div>
    <div id="page"></div>
</div>


<script>
    //获取数据
    var page = 1;
    var pageSize = 20;
    var layPage;
    var title ='';
    layui.use(['layer', 'form', 'laypage'], function () {
        var layer = layui.layer;
        var form = layui.form;
        layPage = layui.laypage;
        setTimeout(function removeReadonly() {
            var title = document.getElementById("title");
            title.removeAttribute("readonly");
        }, 20);
        //新增课件
        $('#add_item').click(function () {
            createNewItem();
        });
        //搜索
        $('#search').click(function () {
            title = $('#title').val();
            firstLoadData();
        });
        firstLoadData();
    });


    function firstLoadData() {
        //自定义每页条数的选择项
        page = 1;
        $.ajax({
            url: context + '/api/educourse/getList?parent_id=0&course_task=' + title,
            type: "GET",
            success: function (result) {
                if (result.success) {
                    layPage.render({
                        elem: 'page'
                        , count: result.count
                        , limit: pageSize
                        , limits: [10, 20, 30]
                        , jump: function (obj) {
                            page = obj.curr;
                            loadListData();
                        }
                    });
                } else {
                    layer.msg(result.msg);
                }
            }
        });

    }

    function loadListData() {
        var list = $('#list');
        list.empty();
        $.ajax({
            url: context + '/api/educourse/getList?parent_id=0&course_task=' + title + '&page=' + page + '&pageSize=' + pageSize,
            type: "GET",
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    totalCount = data.count;
                    for (var i = 0; i < data.length; i++) {
                        var li = '';
                        li += '    <li id="' + i + '">\n' +
                            '                <p class="cover"><img src="' + data[i].resource_url + '" alt=""/></p>\n' +
                            '                <p class="title">' + data[i].course_task + '</p>\n' +
                            '                <p title="删除" class="iconfont del" id="' + data[i].course_id + '"></p>\n' +
                            '                <p title="修改" class="iconfont edit" id="' + i + '"></p>\n' +
                            '            </li>';
                        list.append(li);
                    }


                    //详情
                    list.find('li').click(function () {
                            var index = $(this).prop('id');
                            var id = data[index].course_id;
                            jump('./views/courseware/template/detail[id=' + id + ']');
                        }
                    );
                } else {
                    layer.msg(result.msg);
                }
            }
        })
        ;
    }
</script>

